import React, {FC, useEffect} from 'react';
import {View, StyleSheet, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../App';
import icon_main_logo from '../../assets/icon_main_logo.png';
import {load} from '../../utils/Storage';
import {USER_INFO_KEY} from '../../constants/common';
import UserStore from '../../stores/UserStore';

type PropsType = {};
const Welcome: FC<PropsType> = () => {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

  useEffect(() => {
    const timer = setTimeout(() => {
      getUserInfo();
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getUserInfo = async () => {
    const cacheUserInfo = await load(USER_INFO_KEY);
    if (cacheUserInfo && JSON.parse(cacheUserInfo)) {
      UserStore.setUserInfo(JSON.parse(cacheUserInfo));
      startHome();
    } else {
      startLogin();
    }
  };
  const startLogin = () => {
    navigation.replace('Login');
  };

  const startHome = () => {
    navigation.replace('MainTab');
  };

  return (
    <View style={styles.root}>
      <Image source={icon_main_logo} style={styles.logo_main} />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    flexDirection: 'column',
    alignItems: 'center',
  },
  logo_main: {
    width: 200,
    height: 100,
    marginTop: 200,
    resizeMode: 'contain',
  },
});
export default Welcome;
